{% load i18n %}
{% load static %}
{% load floppyforms %}
<script type="text/javascript">
    // this is used by thumbnail.js to POST to the thumbnail update view
    window.thumbnailUpdateUrl = '{% url 'layer_thumbnail' resource.alternate %}';
</script>
<!--<link href="{% static "lib/css/bootstrap-select.css" %}" rel="stylesheet" />-->
<script type="text/javascript" src="{% static "geonode/js/utils/thumbnail.js" %}"></script>

<!-- Required to make select2 fields work for autocomplete -->
<link href="{% static "vendor/select2/dist/css/select2.css" %}" type="text/css" media="screen" rel="stylesheet" />
<link href="{% static "autocomplete_light/select2.css" %}" type="text/css" media="screen" rel="stylesheet" />
<script type="text/javascript" src="{% static "admin/js/vendor/jquery/jquery.js" %}"></script>
<script type="text/javascript" src="{% static "autocomplete_light/jquery.init.js" %}"></script>
<script type="text/javascript" src="{% static "vendor/select2/dist/js/select2.full.js" %}"></script>
<script type="text/javascript" src="{% static "vendor/select2/dist/js/i18n/en.js" %}"></script>
<script type="text/javascript" src="{% static "autocomplete_light/autocomplete.init.js" %}"></script>
<script type="text/javascript" src="{% static "autocomplete_light/forward.js" %}"></script>
<script type="text/javascript" src="{% static "autocomplete_light/select2.js" %}"></script>
<script type="text/javascript" src="{% static "autocomplete_light/jquery.post-setup.js" %}"></script>

<style>
/* general panel styles */
#mdeditor_form .panel-group .panel{
  overflow: visible;
}
/* date fields proper sizes */
#mdeditor_form .input-group.date {
  width: 100%;
}

/* resizable text-areas */
#mdeditor_form textarea {
  resize: vertical;
  height: 120px;
}

/* question mark (info) distance fom label*/
form #mdeditor_form label{
  margin-right: 0.3em;
}
/* regions */
#regions_multiselect_container .fstElement {
  width: 100%;
}
#regions_multiselect_container .fstChoiceItem {
  background-color: #2c689c;
  border: #2c689c;
}

#mdeditor_form .mandatory-hint,#mdeditor_form .advanced-hint {
  cursor: pointer;
}

/* publishing checkboxes */
#mdeditor_form #id_resource-metadata_uploaded_preserve,
#mdeditor_form #id_resource-is_approved,
#mdeditor_form #id_resource-is_published,
#mdeditor_form #id_resource-featured  {
  float: right;
}

/* mosaiking checkboxes */
#mdeditor_form #id_resource-is_mosaic,
#mdeditor_form #id_resource-has_time,
#mdeditor_form #id_resource-has_elevation  {
  float: right;
}

/* keywords */
#mdeditor_form .tokenfield.form-control {
  height: auto;
}

#mdeditor_form .thesauri_keywords label {
  display: block;
}
#mdeditor_form span.autocomplete-light-widget {
  width: 100%;
}
</style>
<style>
/* metadata edit workflow wizard */
.wizard--progress {
  list-style: none;
  margin: 0;
  padding: 0;
  display: table;
  table-layout: fixed;
  width: 100%;
  color: #2c689c;
}
.wizard--progress > li {
  position: relative;
  display: table-cell;
  text-align: center;
  font-size: 0.8em;
}
.wizard--progress > li:hover {
  cursor: pointer;
}
.wizard--progress > li:before {
  transition: background 0.5s ease 0.1s;
  box-shadow: 5px 5px 5px rgba(0,0,0,.5);
  content: attr(data-step);
  display: block;
  margin: 0 auto;
  background: #DFE3E4;
  width: 3em;
  height: 3em;
  text-align: center;
  margin-bottom: 0.25em;
  line-height: 3em;
  border-radius: 100%;
  position: relative;
  z-index: 1000;
}
.wizard--progress > li:after {
  transition: background 1s ease, width 1s ease;
  width: 0px;
  box-shadow: 5px 5px 5px rgba(0,0,0,.5);
  content: '';
  position: absolute;
  display: block;
  background: #DFE3E4;
  height: 0.5em;
  top: 1.25em;
  left: 50%;
  margin-left: 1.5em\9;
  z-index: -1;
}

.wizard--progress > li:last-child:after {
  display: none;
}
.wizard--progress > li.is-complete {
  color: #333333;
}
.wizard--progress > li.is-complete:before, .wizard--progress > li.is-complete:after {
  color: #FFF;
  background: #333333;
}
.wizard--progress > li.is-complete:before {
  z-index: 1;
}
.wizard--progress > li.is-complete:after {
  transition: background 1s ease, width 1s ease;
  z-index: 0;
  width: 100%;
}
.wizard--progress > li a {
  color: #2c689c;
}
.wizard--progress > li.is-active {
  color: #2c689c;
}
.wizard--progress > li.is-active:before {
  color: #FFF;
  background: #2c689c;
}

.wizard--progress > li.is-complete a {
  color: #000;
}

/**
 * Needed for IE8
 */
.wizard--progress__last:after {
  display: none !important;
}

/**
 * Size Extensions
 */
.wizard--progress--medium {
  font-size: 1.5em;
}

.wizard--progress--large {
  font-size: 2em;
}
.wizard--progress > li:before {
    text-decoration: none;
}
.wizard--progress li:hover a{
  text-decoration: underline;
}
.wizard--progress a, .wizard--progress a:hover:before {
  text-decoration: none;
}

</style>

<style>
/* draggable table */
span.grippy {
  content: '....';
  width: 15px;
  height: 26px;
  display: inline-block;
  overflow: hidden;
  line-height: 5px;
  padding: 3px 4px;
  cursor: move;
  vertical-align: middle;

  font-size: 12px;
  font-family: sans-serif;
  letter-spacing: 2px;
  color: #cccccc;
  text-shadow: 1px 0 1px black;
}
span.grippy::after {
  content: '.. .. .. ..';
}
</style>
<!-- button class="btn btn-success metadata-edit-done" id="btn_upd_md_done" type="submit" style="float:right; opacity: 0;" >{% trans "Done!" %}</button -->
{% block body_outer %}
<ul id="md_tabs" class="nav nav-tabs">
    <li id="metadata_edit_tab" class="active">
        <a data-toggle="tab" href="#edit-metadata"><i class="fa fa-pencil"></i>{% trans "Edit" %}</a>
    </li>
    <li id="preview_tab" dhref="#preview">
        <a data-toggle="tab" href="#preview"><i class="fa fa-camera"></i>{% trans "Preview" %}</a>
    </li>
    <li id="settings_tab" dhref="#settings">
        <a data-toggle="tab" href="#settings"><i class="fa fa-cog"></i>{% trans "Settings" %}</a>
    </li>
</ul>

<div class="tab-content">
<div id="edit-metadata" class="tab-content tab-pane fade in active">
{% block edit_progress %}

  <div id="completeness-hints" class="progress">

  <div class="mandatory-hint progress-bar" role="progressbar" style="width:25%">
    {% trans "Mandatory" %}
  </div>
  <div class="advanced-hint progress-bar" role="progressbar" style="width:25%">
    {% trans "Mandatory" %}
  </div>
  {% if UI_REQUIRED_FIELDS %}
      <div class="metadata-hint progress-bar" role="progressbar" style="width:25%">
        {% trans "Mandatory" %}
      </div>
      <div class="progress-bar" role="progressbar" style="width:25%">
        {% trans "Optional" %}
      </div>
  {% else %}
      <div class="progress-bar" role="progressbar" style="width:50%">
        {% trans "Optional" %}
      </div>
  {% endif %}
  
</div>
{% endblock edit_progress %}
 {% block breadcrumbs %}
  <ul class="wizard--progress wizard--progress--medium">
      <li data-step="1" id="first" class="is-active" data-toggle="tab" href="#mandatory">
          <a>{% trans "Basic Metadata" %}</a>
      </li>
      <li data-step="2" id="second"  data-toggle="tab" href="#advanced">
          <a>{% trans "Location and Licenses" %}</a>
      </li>
      <li data-step="3" data-toggle="tab" href="#ownership">
        {% if UI_REQUIRED_FIELDS %}
            <a>{% trans "Required Metadata" %}</a>
        {% else %}
            <a>{% trans "Optional Metadata" %}</a>
        {% endif %}
      </li>
      <li data-step="4"  data-toggle="tab" href="#dataset">
          <a>{% trans "Dataset Attributes" %}</a>
      </li>
  </ul>
  {% endblock breadcrumbs %}
  {% block mandatory %}
    <div id="mandatory" class="tab-pane fade in active">
        <!--<br />-->
        <div class="panel-group">
            <div class="panel panel-default">
                <!-- div class="panel-heading">Data info</div -->
                <div class="panel-body">
                    <div class="row">
                        <div class="col">
                            <div id="basicInfo" class="container-fluid">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <div id="basicDescriptiveInfo" class="container-fluid">
                                <div class="col-lg-3">
                                    <span><label for="{{ layer_form.thumbnail_url|id }}">{% trans "Thumbnail" %}</label></span>
                                    <div id="embedded_map" class="mrg-btm" style="height:250px;width: 250px;">
                                      <div id="preview_map" style="height: 90%;width: 100%;">
                                      </div>
                                      <div id="preview_image" style="height: 90%;width: 100%;">
                                          <img id="preview_image_src" src="{{ layer_form.thumbnail_url.value }}" height="100%" width="100%"/>
                                      </div>
                                      <div>
                                        <span class="btn-group btn-group-xs btn-group-justified">
                                            <a class="btn btn-default" href="#" id="set_thumbnail">{% trans "Save" %}</a>
                                            <!-- span class="input-group-addon">
                                                <form id="form1" runat="server">
                                                    <input type='file' id="imgInp" />
                                                </form>
                                            </span -->
                                            <a class="btn btn-default" href="#" id="change_thumbnail">{% trans "Edit" %}</a>
                                        </span>
                                      </div>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div id="req_item">
                                      <span><label for="{{ layer_form.title|id }}">{{ layer_form.title.label }}</label></span>
                                      <!--<p class="xxs-font-size">(Name by which the cited resource is known)</p>-->
                                      {{ layer_form.title }}
                                    </div>
                                    <div id="req_item">
                                        <span><label for="{{ layer_form.abstract|id }}">{{ layer_form.abstract.label }}</label></span>
                                        <!--<p class="xxs-font-size">(Brief narrative summary of the content of the resource/s)</p>-->
                                        {{ layer_form.abstract }}
                                    </div>
                                </div>
                                <div class="col-lg-5">
                                    <div class="col-lg-6 col-xs-12">
                                        <span><label for="{{ layer_form.date_type|id }}">{{ layer_form.date_type.label }}</label></span>
                                        <!--<p class="xxs-font-size">(Identification of when a given event occurred)</p>-->
                                        {{ layer_form.date_type }}
                                    </div>
                                    <div class="col-lg-6 col-xs-12" id="req_item">
                                        <span><label for="{{ layer_form.date|id }}">{{ layer_form.date.label }}</label></span>
                                        <!--<p class="xxs-font-size">(When a given event occurred on the resource)</p>-->
                                        {{ layer_form.date }}
                                    </div>
                                    <div id="basicCategoryInfo" class="col-lg-12">
                                        <span><label for="{{ category_form.category_choice_field|id }}" class="control-label required-field">{% trans "Category" %}</label></span>
                                        <select
                                            title="{% trans "Choose one of the following..." %}"
                                            data-live-search="true"
                                            data-size="5"
                                            name="category_choice_field"
                                            id="category_form"
                                            class="selectpicker form-control"
                                            >
                                            <option {% if not category_form.initial %} selected="selected" {% endif %} value="">---</option>
                                          {% for choice in category_form.category_choice_field.field.choices %}
                                              <option
                                              {% ifequal category_form.initial choice.0 %} selected="selected" {% endifequal %}
                                              value="{{ choice.0 }}"
                                              data-content="<span class='has-popover' data-container='body' data-toggle='popover' data-placement='top'  data-content=' {{ choice.2.description }}' rigger='hover'><i class='fa {{choice.2.fa_class}}'></i> {{ choice.2.gn_description }}<span>"
                                              >{{ choice.2.gn_description }}</option>
                                          {% endfor %}
                                        </select>
                                    </div>
                                    <div id="basicGroupInfo" class="col-lg-12">
                                        <span><label for="id_resource-group" class="control-label required-field">{% trans "Group" %}</label></span>
                                        <select
                                            title="{% trans "Choose one of the following..." %}"
                                            data-live-search="true"
                                            data-size="5"
                                            name="resource-group"
                                            id="id_resource-group"
                                            class="selectpicker form-control"
                                            >
                                            <option {% if not group %} selected="selected" {% endif %} value="">---</option>
                                            {% for group in metadata_author_groups %}
                                            <option
                                                value="{{ group.group.id }}"
                                                {% ifequal resource.group group.group %} selected="selected" {% endifequal %}
                                                >
                                                {{ group.title }}
                                            </option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                    <div class="col-lg-12">
                                        <span><label for="{{ layer_form.date_type|id }}">{{ layer_form.keywords.label }}</label></span>
                                        {{ layer_form.keywords }}
                                    </div>
                                    {% if THESAURI_FILTERS %}
                                    <div class="col-lg-12 thesauri_keywords">
                                      {{tkeywords_form.as_p}}
                                    </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endblock %}
    {% block advanced %}
    <div id="advanced" class="tab-pane fade">
        <div class="panel-group">
                <div class="panel panel-default">
                    <!-- div class="panel-heading">Metadata info</div -->
                    <div class="panel-body">
                        <div class="" id="mdinfo">
                            <div class="">
                            {% block layer_attributes %}
                                <div class="col-lg-4">
                                    <div>
                                        <span><label for="{{ layer_form.language|id }}">{{ layer_form.language.label }}</label></span>
                                        <!--<p class="xxs-font-size">(Language used within the dataset)</p>-->
                                        {{ layer_form.language }}
                                    </div>
                                    <div>
                                        <span><label for="{{ layer_form.license|id }}">{{ layer_form.license.label }}</label></span>
                                        <!--<p class="xxs-font-size">(License of the dataset)</p>-->
                                        {{ layer_form.license }}
                                    </div>
                                    <div>
                                        <span><label for="{{ layer_form.doi|id }}">{{ layer_form.doi.label }}</label></span>
                                        {{ layer_form.doi }}
                                    </div>
                                    <div>
                                        <span><label for="{{ layer_form.attribution|id }}">{{ layer_form.attribution.label }}</label></span>
                                        {{ layer_form.attribution }}
                                    </div>
                                </div>
                                {% endblock layer_attributes %}
                                {% block layer_regions %}
                                <div class="col-lg-4">
                                      <div id="regions_multiselect_container">
                                          <span><label for="{{ layer_form.regions|id }}">{{ layer_form.regions.label }}</label></span>
                                          {{ layer_form.regions }}
                                      </div>
                                      <div>
                                          <span><label for="{{ layer_form.data_quality_statement|id }}">{{ layer_form.data_quality_statement.label }}</label></span>
                                          <!--<p class="xxs-font-size">(General explanation of the data producer's knowledge about the lineage)</p>-->
                                          {{ layer_form.data_quality_statement }}
                                      </div>
                                </div>
                                {% endblock layer_regions %}
                                {% block layer_constraints %}
                                <div class="col-lg-4">
                                    <div>
                                        <span><label for="{{ layer_form.restriction_code_type|id }}">{{ layer_form.restriction_code_type.label }}</label></span>
                                        <!--<p class="xxs-font-size">(Limitation/s placed upon the access or use of data)</p>-->
                                        {{ layer_form.restriction_code_type }}
                                    </div>
                                    <div>
                                        <span><label for="{{ layer_form.constraints_other|id }}">{{ layer_form.constraints_other.label }}</label></span>
                                        <!--<p class="xxs-font-size">(Other restrictions and legal prerequisites for accessing or use data and metadata)</p>-->
                                        {{ layer_form.constraints_other }}
                                    </div>
                                </div>
                                {% endblock layer_constraints %}
                            </div>
                            <div class="row">

                            </div>
                        </div>
                    </div>
                </div>
        </div>
    </div>
    {% endblock %}
    {% block other_tab %}{% endblock other_tab %}
    {% block ownership %}
    <div id="ownership" class="tab-pane fade">
        <div class="panel-group"><div class="panel panel-default"><div class="panel-body">
        <div id="mdinfo">
            <div class="col-xs-12 col-lg-4">
              <p>{% trans "Other, Optional, Metadata" %}</p>
                <div>
                    <span><label for="{{ layer_form.edition|id }}">{{ layer_form.edition.label }}</label></span>
                    <!--<p class="xxs-font-size">(Version of the cited resource)</p>-->
                    {{ layer_form.edition }}
                </div>
                <div>
                    <span><label for="{{ layer_form.purpose|id }}">{{ layer_form.purpose.label }}</label></span>
                    <!--<p class="xxs-font-size">(Brief narrative summary of the intentions with which the resource/s ...)</p>-->
                    {{ layer_form.purpose }}
                </div>
                <div>
                    <span><label for="{{ layer_form.supplemental_information|id }}">{{ layer_form.supplemental_information.label }}</label></span>
                    <!--<p class="xxs-font-size">(Any other descriptive information about the dataset)</p>-->
                    {{ layer_form.supplemental_information }}
                </div>
            </div>
            <div class="col-xs-12 col-lg-5">
                    <div class="col-xs-12 col-lg-6 check-select">
                      <div class="input-group date">
                        <span><label for="{{ layer_form.temporal_extent_start|id }}">{{ layer_form.temporal_extent_start.label }}</label></span>
                        <!--<p class="xxs-font-size">(When a given event occurred on the resource)</p>-->
                        {{ layer_form.temporal_extent_start }}
                        </div>
                    </div>
                    <div class="col-xs-12 col-lg-6 check-select">
                        <div class="input-group date">
                        <span><label for="{{ layer_form.temporal_extent_end|id }}">{{ layer_form.temporal_extent_end.label }}</label></span>
                        <!--<p class="xxs-font-size">(Identification of when a given event occurred)</p>-->
                        {{ layer_form.temporal_extent_end }}
                        </div>
                    </div>
                <div class="col-xs-12">
                    <div style="margin-top: 5px">
                        <span><label for="{{ layer_form.maintenance_frequency|id }}">{{ layer_form.maintenance_frequency.label }}</label></span>
                        <!--<p class="xxs-font-size">(Identification of when a given event occurred)</p>-->
                        {{ layer_form.maintenance_frequency }}
                    </div>
                    <div style="margin-top: 5px">
                        <span><label for="{{ layer_form.spatial_representation_type|id }}">{{ layer_form.spatial_representation_type.label }}</label></span>
                        <!--<p class="xxs-font-size">(Method used to represent geographic information in the dataset)</p>-->
                        {{ layer_form.spatial_representation_type }}
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-lg-3">
              <div class="panel panel-default" style="margin-top: 5px">
                  <div class="panel-heading">{% trans "Responsible Parties" %}</div>
                  <div class="panel-body check-select">
                      <span><label for="{{ layer_form.poc|id }}">{{ layer_form.poc.label }}</label></span>
                      {{ layer_form.poc }}
                  </div>
              </div>
              <div class="panel panel-default">
                  <div class="panel-heading">{% trans "Responsible and Permissions" %}</div>
                  <div class="panel-body">
                      <div>
                          <span><label for="{{ layer_form.owner|id }}">{{ layer_form.owner.label }}</label></span>
                          <!--<p class="xxs-font-size">(Responsible of the cited resource)</p>-->
                          {{ layer_form.owner }}
                      </div>
                      <div>
                          <span><label for="{{ layer_form.metadata_author|id }}">{{ layer_form.metadata_author.label }}</label></span>
                          <!--<p class="xxs-font-size">(Author of the metadata)</p>-->
                          {{ layer_form.metadata_author }}
                      </div>
                  </div>
              </div>
            </div>
        </div>
      </div></div></div>
    </div>
    {% endblock %}
    {% block dataset %}
    <div id="dataset" class="tab-pane fade">
      <div class="panel-group"><div class="panel panel-default"><div class="panel-body">
        <div>
          <div style="padding: 15px">
            <div>
                <label>{% trans "Use a custom template?" %}</label>
                <input type="checkbox" name="resource-use_featureinfo_custom_template" class="has-external-popover"
                  data-content="specifies wether or not use a custom GetFeatureInfo template." data-placement="right"
                  data-container="body" data-html="true" data-toggle="toggle"
                  placeholder="specifies wether or not use a custom GetFeatureInfo template."
                  id="id_resource-use_featureinfo_custom_template"
                  {% if resource.use_featureinfo_custom_template %}checked{% endif %}>
                <div id="layer-attributes-panel"
                  {% if resource.use_featureinfo_custom_template %}style="visibility: collapse;" {% endif %}>
                  {{ attribute_form.management_form }}
                  <table class="table table-striped table-bordered table-condensed">
                      <tr class="table-header">
                          <th style="width:25px;background: #efefef;"></th>
                          <th>{% trans "Attribute" %}</th>
                          <th>{% trans "Label" %}</th>
                          <th>{% trans "Description" %}</th>
                          <th>{% trans "Display Order" %}</th>
                          <th>{% trans "Display Type" %}</th>
                          <th>{% trans "Visible" %}</th>
                      </tr>
                      {% for form in attribute_form.forms %}
                      {% if form.attribute %}
                      <tr>
                          <td style="width:25px;background: #efefef;"> <span class="grippy"></span></td>
                          <td><div style="display:none">{{form.id}}</div>{{form.attribute}}</td>
                          <td>{{form.attribute_label}}</td>
                          <td>{{form.description}}</td>
                          <td>{{form.display_order}}</td>
                          <td>{{form.featureinfo_type}}</td>
                          <td>{{form.visible}}</td>
                      </tr>
                      {% endif %}
                      {% endfor %}
                  </table>
                </div>
                <div id="layer-attributes-custom_template"
                  {% if not resource.use_featureinfo_custom_template %}style="visibility: collapse;" {% endif %}>
                  {{layer_form.featureinfo_custom_template}}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    {% endblock %}
  </div>
</div>
<div id="preview" class="tab-pane fade" style="overflow: hidden;">
    <!-- <iframe id="preview_encoder_iframe" height="100%" width="100%" style="width:0;height:0;border:0;border:none;" src="{% url 'layer_metadata_detail' resource.alternate %}"></iframe> -->
    {% if metadataxsl %}
        <iframe id="preview_encoder_iframe" frameborder="0" scrolling="yes" onload="if(this.contentWindow.document.body) {$('#preview').height(this.contentWindow.document.body.scrollHeight)}" src="/showmetadata/xsl/{{resource.id}}"></iframe>
    {% else %}
        <iframe id="preview_encoder_iframe" frameborder="0" scrolling="yes" onload="if(this.contentWindow.document.body) {$('#preview').height(this.contentWindow.document.body.scrollHeight)}" src="/catalogue/csw_to_extra_format/{{resource.uuid}}/{{resource.title}}.html"></iframe>
    {% endif %}
</div>
<div id="settings" class="tab-pane fade" style="overflow: hidden;">
  <!--<br />-->
    <div class="col-xs-12 col-lg-4">
      <div class="panel-group">
          <div class="panel panel-default">
              <div class="panel-body">
                <div class="panel panel-default" >
                    <div class="panel-heading">{% trans "Publishing" %}</div>
                      <div class="panel-body">
                        <div>
                            <span><label for="{{ layer_form.metadata_uploaded_preserve|id }}">{{ layer_form.metadata_uploaded_preserve.label }}</label></span>
                            {{ layer_form.metadata_uploaded_preserve }}
                        </div>
                        <div>
                            <span><label for="{{ layer_form.is_approved|id }}">{{ layer_form.is_approved.label }}</label></span>
                            {{ layer_form.is_approved }}
                        </div>
                        <div>
                            <span><label for="{{ layer_form.is_published|id }}">{{ layer_form.is_published.label }}</label></span>
                            {{ layer_form.is_published }}
                        </div>
                        <div>
                            <span><label for="{{ layer_form.featured|id }}">{{ layer_form.featured.label }}</label></span>
                            {{ layer_form.featured }}
                        </div>
                      </div>
                </div>
              </div>
            </div>
     </div>
    </div>
    <div class="col-xs-12 col-lg-4">
      <div class="panel-group">
          <div class="panel panel-default">
              <div class="panel-body">
                <div class="panel panel-default" >
                  <div class="panel-heading">{% trans "Other Settings" %}</div>
                  <div class="panel-body">
                    <div>
                        <span><label for="{{ layer_form.is_mosaic|id }}">{{ layer_form.is_mosaic.label }}</label></span>
                        {{ layer_form.is_mosaic }}
                    </div>
                    <div>
                        <span><label for="{{ layer_form.has_time|id }}">{{ layer_form.has_time.label }}</label></span>
                        {{ layer_form.has_time }}
                    </div>
                    <div>
                        <span><label for="{{ layer_form.has_elevation|id }}">{{ layer_form.has_elevation.label }}</label></span>
                        {{ layer_form.has_elevation }}
                    </div>

                    <div>
                        <span><label for="{{ layer_form.time_regex|id }}">{{ layer_form.time_regex.label }}</label></span>
                        {{ layer_form.time_regex }}
                    </div>
                    <div>
                        <span><label for="{{ layer_form.elevation_regex|id }}">{{ layer_form.elevation_regex.label }}</label></span>
                        {{ layer_form.elevation_regex }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
        </div>
    </div>
</div>
</div>

<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function (event) {
    $('#id_resource-use_featureinfo_custom_template').on('change', function (event) {
        if (this.checked) {
          $('#layer-attributes-panel').css("visibility", "collapse");
          $('#layer-attributes-custom_template').css("visibility", "visible");
        } else {
          $('#layer-attributes-panel').css("visibility", "visible");
          $('#layer-attributes-custom_template').css("visibility", "collapse");
        }
    });
  });
</script>
{% endblock %}
